<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script> -->
  <title>KleinBlue - Login</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }

  body {
    display: flex;
    min-height: 100%;
    /* font-family: tahoma, '宋体', helvetica, sans-serif, 'SF Pro Display', Roboto, Noto, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei'; */
    font-size: 14px;
    font-family: "Microsoft Jhenghei", "Microsoft Yahei";
    color: #3A4145;
    line-height: 1.57142857;
    background: url(./images/bg1.png) no-repeat center top;
    background-color: #f5f6f7;
    background-size: cover;
  }

  .link {}

  .mainBox {
    text-align: center;
    padding: 18px;
  }

  .Row {
    margin-bottom: 10px;
  }

  .Vcode {
    display: flex;
    justify-content: space-between;
  }

  .Vcode button {
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #989898;
    border-radius: 3px;
  }

  .Vcode input {
    width: 62% !important;
  }

  label {
    display: flex;
    justify-content: space-between;
  }

  .mainBox .Row input {
    width: 80%;
  }

  input {
    height: 20px;
    padding: 12px 6px;
    font-size: 12px;
    vertical-align: middle;
    background-color: transparent;
    border: none;
    border: 1px solid #989898;
    border-radius: 3px;
    outline: none;
    box-sizing: border-box;
  }

  input::-webkit-input-placeholder {
    color: #ababab;
  }

  input:focus {
    border: 1px solid #f4511e;
  }

  #handleSubmit {
    display: inline-block;
    width: 100%;
    margin-top: 10px;
    padding: 5px 0;
    font-size: 15px;
    color: #fff;
    cursor: pointer;
    background-color: #f4511e;
    border: none;
    border-radius: 4px;
  }
</style>

<body>
  <div class="mainBox">
    <div class="Row">
      <label for="username">
        账号：
        <input type="text" id='username' placeholder="账号名">
      </label>
    </div>
    <div class="Row">
      <label for="password">
        密码：
        <input type="text" id='password' placeholder="登录密码">
      </label>
    </div>
    <div class="Row Vcode">
      <input type="text" id="code">
      <button id="handleCode">获取验证码</button>
    </div>
    <div>
      <button id='handleSubmit'>提 交</button>
    </div>
  </div>

  <!-- 弹窗标签 -->
  <!-- <dialog open>44444</dialog> -->

</body>

</html>
<script>

  $(document).ready(function () {
    // 提交操作
    $("#handleSubmit").click(function () {
      if (!$("#code").val()) {
        alert("请获取验证码");
        return false;
      }



      let info = {
        username: $("#username").val(),
        password: $("#password").val()
      }
      console.log(info);
    })

    // 获取验证码
    $("#handleCode").click(function () {
      if (!$("#username").val()) {
        alert("账号名不能为空");
        return false;
      } else {
        let reg = /^1[3|4|5|7|8]\d{9}$/;

        if (reg.test($("#username").val())) {
          document.getElementById('handleCode').disabled = 'true'
          document.getElementById('handleCode').style.borderColor = "red"
        } else {
          alert("请输入正确账号名");
          return false;
        }
      }

    })
  })

  // http://wthrcdn.etouch.cn/weather_mini?city=厦门

  // $.ajax({
  //   type: "GET",
  //   url: "http://wthrcdn.etouch.cn/weather_mini",
  //   dataType: "josnp",
  //   params:{city:'厦门'},
  //   success: function (res) {
  //     console.log(res)
  //   }
  // })

</script>

<script src="./js/click-effect.js"></script>